<template>
	<view class="verification-borrow-money-detail">
		<view class="head">
			<view class="title">
				<text>出差借款</text>
				<text class="day">超时43天</text>
			</view>
			<view class="body">
				<view class="qiun-charts">
					<canvas canvas-id="canvasRing1" id="canvasRing1" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
				</view>
				<view class="body-money">
					￥10,000.00
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="title">
			 <text>借还记录</text>
			</view>
			<view class="detail">
			 <view class="left">
			 	<text>获得借款</text>
			 	<text class="time">2020-10-16 10:33:05</text>
			 </view>
			 <view class="right">
			 	<text style="font-weight: bold;">+10,000.00</text>
			 	<text class="borrow-money">出差借款</text>
			 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	let canvasRing1 = null;
	let _self = this
	export default{
		onShow() {
			this.show()
		},
		data(){
			return{
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				ringData: {
					"series": [{
						"data": 100,
						"name": '剩余借款',
						"color": '#32B6C5'
					}]
				},
			}
		},
		methods:{
			show(){
				_self = this;
				this.cWidth = uni.upx2px(500);
				this.cHeight = uni.upx2px(300);
				this.showRing("canvasRing1", this.ringData, canvasRing1)
			},
			showRing(canvasId, chartData, canvaRing) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						position:'right',
						fontSize:15
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: false,
					title: {
						name: '100.00%',
						fontSize: 15,
						color:chartData.series[0].color
					},
					extra: {
						pie: {
							ringWidth: 6 * _self.pixelRatio,
						}
					},
				});
			},
		}
		
	}
</script>

<style lang="scss" scoped>
.verification-borrow-money-detail{
	.head,.footer{
	 background: #fff;
	}
	.head{
		text{
			display: block;
		}
		.title{
			border-bottom: 1px solid #F8F8F8;
			padding: 20rpx 10rpx;
			.day{
				color:#F49E9E;
				margin-top: 10rpx;
				font-size: 32rpx;
			}
		}
		.chart{
			padding: 20rpx 10rpx;
		}
	}
	.footer{
		margin-top: 20rpx;
		.title{
			color: #bbb;
			padding: 20rpx 10rpx;
			font-size: 32rpx;
			border-bottom: 1px solid #F8F8F8;
		}
		.detail{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 10rpx;
			text{
				display: block;
			}
			.left{
			  .time{
				  color: #bbb;
				  font-size: 32rpx;
				  margin-top: 10rpx;
			  }
			}
			.right{
				text-align: right;
				.borrow-money{
				    color:#33B5C6;
					margin-top: 10rpx;
					font-size: 32rpx;
				}
			}
		}
	}
	.qiun-charts {
		width: 500upx;
		height: 300upx;
		background-color: #FFFFFF;
		margin: 0 auto;
	
		.charts {
			width: 500upx;
			height: 300upx;
			background-color: #FFFFFF;
		}
	}
	.body{
		display: flex;
		.body-money{
			flex: 1;
			display: inline-block;
			line-height: 300rpx;
			margin-left:50rpx ;
			color: $uni-text-color-grey;
		}
	}
}	
</style>
